<template>
    <div>

        <el-table ref="multipleTable" :data="tableData" stripe style="width: 80%;" tooltip-effect="dark">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="appointmentTime"
                    label="预约时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="deliveryTime"
                    label="送洗时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="finishTime"
                    label="完成时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    style="font-size: 16px"
                    prop="orderPrice"
                    label="订单总价格"
                    width="160">
            </el-table-column>
            <el-table-column
                    style="font-size: 25px;font-style: inherit"
                    prop="orderPriceZhe"
                    label="折后"
                    width="160">
            </el-table-column>
            <el-table-column label="订单状态" prop="status" width="160" fixed="right">
            </el-table-column>
            <el-table-column label="操作" prop="orderId" width="400" fixed="right">
                <template v-slot="scope">
                    <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
                                   icon-color="yellow"
                                   title="请确认用户已支付成功" @confirm="confirmPay(scope.row.orderId)">
                        <el-button style="margin-right: 3px" v-if="!scope.row.orderIspay" type="primary"
                                   slot="reference">确认支付
                        </el-button>
                    </el-popconfirm>
                    <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
                                   icon-color="yellow"
                                   title="请确认用户将订单内所有衣物送到" @confirm="confirmWashing(scope.row.orderId)">
                        <el-button style="margin-right: 3px" v-if="scope.row.status=='待送洗'" type="primary"
                                   slot="reference">确认送洗
                        </el-button>
                    </el-popconfirm>
                    <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
                                   icon-color="yellow"
                                   title="请确认好用户已将所有衣物取走" @confirm="confirmTaking(scope.row.orderId)">
                        <el-button style="margin-right: 3px" v-if="scope.row.status=='待取衣'" type="primary"
                                   slot="reference">确认取衣
                        </el-button>
                    </el-popconfirm>
                    <el-button type="primary" @click="toOrderInfo(scope.row.orderId,scope.row.status)">查看订单详情
                    </el-button>
                    <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
                                   title="确认删除此订单吗？" @confirm="del(scope.row.orderId)">
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 10px;">
            <el-pagination background :current-page="params.pageNum" :page-size="params.pageSize"
                           layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "OrderItem",
        data() {
            return {
                userId: this.$route.query.param,
                total: 0,
                tableData: [],
                params: {
                    pageNum: 1,
                    pageSize: 6,
                },

            }
        },
        methods: {
            load() {
                this.params.userId = this.userId
                request.get('/order/history', {
                    params: this.params
                }).then(res => {
                    console.log(res)
                    if (res.code === "200") {
                        this.total = res.data.total;
                        this.tableData = res.data.list;

                    }
                })
            },
            /**
             *分页
             * @param pageNum 页码
             */
            handleCurrentChange(pageNum) {
                this.params.pageNum = pageNum;
                this.load()
            },
            /**
             *删除订单
             * @param orderId 订单id
             */
            del(orderId) {
                request.delete('/order/delete' + orderId).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('删除成功')
                        this.load();
                    } else {
                        this.$notify.error(res.msg)
                    }
                })

            },
            /**
             * 确认支付
             * @param orderId 订单id
             */
            confirmPay(orderId) {
                request.put('/order/pay' + orderId).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('支付成功')
                        this.load();
                    } else {
                        this.$notify.error(res.msg)
                    }
                })
            },
            confirmWashing(orderId){
                request.put('/order/confrimWashing' + orderId).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('送洗成功')
                        this.load();
                    } else {
                        this.$notify.error(res.msg)
                    }
                })
            },
            confirmTaking(orderId){
                request.put('/order/confrimTaking' + orderId).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('取衣成功')
                        this.load();
                    } else {
                        this.$notify.error(res.msg)
                    }
                })
            },
            toOrderInfo(orderId,status) {
                this.$router.push({
                    path: 'OrderItemInfo',
                    query: {param: orderId,flag :status}
                })

            }
        },
        mounted() {
            this.load()
        }

    }
</script>
